<script setup>
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import {
  GetDetailsAPI,
  GetConfigAPI,
  ConfigTemplateAPI,
} from "@/api/system/printConfig";
import { UpFileAPI } from "@/api/common";
import printInitConfig from "./printConfig.json";
import { elementData, provider } from "./element.js";
import textData from "./text.json";
import "../../../../public/print-lock.css";

import printV1Store from "@/store/modules/printV1";
// import { callPrinter } from 'call-printer'
// 预览
import printPreview from "./view.vue";
// import printSocketV2 from "@/store/modules/printV2";

const elementList = ref([]);
const toolList = ref([]);

const { proxy } = getCurrentInstance();

const route = useRoute();

const router = useRouter();

const fileUploadRef = ref(null);

const fileUploadUrl = ref(null);

const emit = defineEmits();
// 纸张类型

// 面板 对象
const hiprintTemplate = ref();

// 预览实力
const preViewRef = ref(null);

/**
 * 打印方法
 */
const printV1 = printV1Store();
const group = ref();

//  面板配置项
const templateConfig = reactive({
  typeDict: "",
  data: [],
  elementList: [],
  zoom: 1,
  fontSize: "", // 文字大小
  horizontal: "", // 水平间距
  perpendicular: "", // 垂直间距
  title: "测试标题",
  width: 145, // 毫米 打印纸质宽度 number
  height: 99, // 毫米 打印纸质宽度 number
  // 基本纸张大小
  paperTypes: {
    label: {
      width: 150,
      height: 100,
    },
    A3: {
      width: 420,
      height: 296.6,
    },
    A4: {
      width: 210,
      height: 296.6,
    },
    A5: {
      width: 210,
      height: 147.6,
    },
    B3: {
      width: 500,
      height: 352.6,
    },
    B4: {
      width: 250,
      height: 352.6,
    },
    B5: {
      width: 250,
      height: 175.6,
    },
  },
});

// hiprint
const hiprintForm = reactive({
  jsonOut: "", // 导出json数据
});
const loading = ref(false);

onMounted(async () => {});

/**
 * 构建设计器
 * 注意: 必须要在 onMounted 中去构建
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */

let tiemr = null;
// 初始化
const initPrint = (data) => {
  hiprint.init({
    providers: [provider([...data.arr, ...data.tool])],
  });
  // $('.ep-draggable-item').empty()
  // hiprint.PrintElementTypeManager.build('.hiprintEpContainer', 'defaultModule')

  // 还原配置
  hiprint.setConfig();
  // 替换配置
  hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
  $("#PrintElementOptionSetting").empty(); // 先清空, 避免重复构建
  hiprintTemplate.value = new hiprint.PrintTemplate({
    template: templateConfig.data,
    fields: [{ field: "", text: "" }],
    settingContainer: "#PrintElementOptionSetting", // 元素参数容器
    // 多个面板
    paginationContainer: ".hiprint-printPagination",
    dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
    history: true, // 是否需要 撤销重做功能
    onImageChooseClick: (target) => {
      console.log(target, "sss");
      fileUploadRef.value.click();
      tiemr = setInterval(() => {
        if (fileUploadUrl.value) {
          target.refresh(fileUploadUrl.value, {
            auto: true, // 根据图片宽高自动等比(宽>高?width:height)
            width: true, // 按宽调整高
            height: true, // 按高调整宽
            real: true, // 根据图片实际尺寸调整(转pt)
          });
          clearInterval(tiemr);
        }
      }, 1000);
    },
    getSelectEls: function (data) {
      console.log(data);
    },
    onDataChanged: (type, json) => {
      console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
      console.log(json); // 返回 template
    },
    onUpdateError: (e) => {
      console.log(e);
    },
  });
  // 构建 并填充到 容器中
  hiprintTemplate.value.design("#hiprint-printTemplate", { axisEnabled: true });
  let tiemr = null;
  tiemr = setInterval(() => {
    if (hiprint.hiwebSocket.opened) {
      clearInterval(tiemr);
      // proxy.successMsg('打印机连接成功！')
      return;
    }
    console.log(
      import.meta.env.VITE_APP_BASE_PRINT,
      "import.meta.env.VITE_APP_BASE_PRINT44444"
    );
    hiprint.hiwebSocket.setHost(import.meta.env.VITE_APP_BASE_PRINT);
  }, 500);
};

// 接口
const initTemplate = async () => {
  try {
    loading.value = true;
    const { data: res } = await GetConfigAPI(route.query.id);
    // 如果有 用数据库 否则初始模板
    templateConfig.data = res.statsJson
      ? JSON.parse(res.statsJson)
      : printInitConfig;
    const resp = await GetDetailsAPI(route.query.printCorrelation);
    const elementArr = elementData(resp.data);
    elementList.value = elementArr.arr;
    toolList.value = elementArr.tool;
    const config = templateConfig.data.panels[0];
    templateConfig.height = config.height;
    templateConfig.width = config.width;
    templateConfig.typeDict = `宽${templateConfig.width}mm 高${templateConfig.height}mm`;
    nextTick(() => {
      initPrint(elementData(resp.data));
    });
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};
initTemplate();
// 获取元素
const getSelectEls = () => {
  const el = hiprintTemplate.value.getSelectEls();
  console.log(el, "el---");
};

// 左对齐
const setElsAlign = (e) => {
  hiprintTemplate.value.setElsAlign(e);
};

/**
 * true为水平 false为垂直
 */
const setElsSpace = (num) => {
  if (!num) return;
  hiprintTemplate.value.setElsSpace(
    num ? num : templateConfig.horizontal,
    true
  );
};

// 垂直间距
const perpendicular = (num) => {
  if (!num) return;
  hiprintTemplate.value.setElsSpace(
    num ? num : templateConfig.perpendicular,
    false
  );
};

// 修改文字大小
const updateFontSize = () => {
  if (!templateConfig.fontSize) return;
  hiprintTemplate.value.updateOption("fontSize", templateConfig.fontSize);
};

const updateFontWeight = () => {
  hiprintTemplate.value.updateOption("fontWeight", "bolder");
};

const rotatePaper = () => {
  if (hiprintTemplate.value) {
    hiprintTemplate.value.rotatePaper();
  }
};

/**
 * 设置纸张大小
 * @param type [A3, A4, A5, B3, B4, B5, other]
 * @param value {width,height} mm
 */
const setPaper = (value) => {
  try {
    hiprintTemplate.value.zoom(templateConfig.zoom, false);
    if (value != "zdy") {
      templateConfig.width = templateConfig.paperTypes[value].width;
      templateConfig.height = templateConfig.paperTypes[value].height;
    }

    templateConfig.typeDict =
      value != "zdy"
        ? `${value} 宽${templateConfig.width}mm 高${templateConfig.height}mm`
        : `自定义 宽${templateConfig.width}mm 高${templateConfig.height}mm`;
    templateConfig.type = value;
    hiprintTemplate.value.setPaper(templateConfig.width, templateConfig.height);
  } catch (error) {
    new Error(error);
    proxy.warningMsg(`操作失败: ${error}`);
  }
};
// JSON导出
const exportJson = async () => {
  // console.log(hiprintTemplate.value)
  if (hiprintTemplate.value) {
    hiprintForm.jsonOut = JSON.stringify(hiprintTemplate.value.getJson() || {});
  }
  // 配置修改保存
  proxy.$modal.loading("请稍候...");
  try {
    await ConfigTemplateAPI({
      printId: route.query.id,
      statsJson: JSON.stringify(hiprintTemplate.value.getJson() || {}),
    });
    proxy.successMsg("配置成功");
  } catch (err) {
    console.log(err);
  } finally {
    proxy.$modal.closeLoading();
  }
  emit("exportJson", JSON.stringify(hiprintTemplate.value.getJson() || {}));
};

// 清空
const clearPaper = async () => {
  const isif = await proxy.MessageBox("确定要清空吗？");
  if (!isif) return;
  try {
    hiprintTemplate.value.clear();
  } catch (error) {
    this.$message.error(`操作失败: ${error}`);
  }
};

// 打印
const print = async () => {
  console.log(hiprintTemplate.value.getHtml(textData));

  // 测试
  printV1.print({
    template: hiprintTemplate.value.getHtml(textData),
    printer: "",
    title: import.meta.env.VITE_PRINT_TITLE,
  });
  //   this.$message.error('客户端未连接,无法直接打印')
};

/**
 * V2打印
 * @description: 打印 html 字符串
 * @param {String} html 打印的html字符串
 * @param {String|number} templateId vue-plugin-hiprint 中的模板id，你可以自定义传入一个 Id，用于回调 success/error 判断
 * @param {String} printer 打印机名称 printer.name 可为空，缺省默认使用设备默认打印机
 * @param {pageSize} pageSize 打印纸张大小 { height: 80 * 1000, width: 60 * 1000 } 可为空，缺省默认使用打印机默认纸张
 * @description: 其他参数参考 默认打印参数说明
 */
// const printStoreV2 = printSocketV2();
const printV2 = () => {
  console.log(hiprintTemplate.value);
  console.log(printStoreV2.printSocket);

  socket.emit("news", { html });
};

// 关闭当前
const backTo = async () => {
  const result = await proxy.MessageBox(
    "关闭当前页面，数据会销毁，请确认数据已保存"
  );
  if (!result) return;
  router.push("/system/toolConfig/printTemplate");
};

// 预览
const preView = () => {
  preViewRef.value.isShow(hiprintTemplate.value, {
    qrcode: "WT-10000",
    barcode: "WT10001",
    productionNumber: "WT10001",
    materialCode: "YL-10000",
    materialName: "我是名称",
    rollingDiameter: "10克",
    grossWeight: "1克",
    grawWeight: "1克",
    joint: "1",
    defect: "1",
    materialRatio: "YL-13B-1",
    materialNet: "A",
    materialNet_type: "B",
    createMan: "测试名称",
  });
};

// 上传图片
const onChange = async (event) => {
  // 获取上传后的文件信息
  try {
    const file = event.target?.files[0];
    let data = new FormData();
    data.append("file", file);
    const { data: result } = await UpFileAPI(data);
    fileUploadUrl.value = result.url;
  } catch {}
};

/**
 * 进入页面强制刷新
 */
onMounted(() => {
  if (sessionStorage.getItem("print", 1) == "1") {
    sessionStorage.setItem("print", 2);
    location.reload();
  }
  // initTemplate()
});
</script>

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="mb10">
        <el-button @click="setPaper('label')">标签</el-button>
        <el-button @click="setPaper('A3')">A3</el-button>
        <el-button @click="setPaper('A4')">A4</el-button>
        <el-button @click="setPaper('A5')">A5</el-button>
        <el-button @click="setPaper('B3')">B3</el-button>
        <el-button @click="setPaper('B4')">B4</el-button>
        <el-button @click="setPaper('B5')">B5</el-button>
        <el-popover placement="right" :width="400" trigger="click">
          <template #reference>
            <el-button type="primary">自定义宽高</el-button>
          </template>
          <el-form>
            <el-form-item label="宽">
              <el-input v-model="templateConfig.width" />
            </el-form-item>
            <el-form-item label="高">
              <el-input v-model="templateConfig.height" />
            </el-form-item>
            <el-form-item label="高">
              <el-button type="primary" @click="setPaper('zdy', templateConfig)"
                >确认</el-button
              >
            </el-form-item>
          </el-form>
        </el-popover>
      </el-col>
      <el-col :span="24" class="mb10">
        <el-button @click="updateFontWeight(true)"
          >选中元素字体Bolder</el-button
        >
        <el-button @click="setElsSpace(true, 10)">水平间距10</el-button>
        <el-button @click="perpendicular(false, 10)">垂直间距10</el-button>
        <el-button @click="setElsAlign('left')">左对齐</el-button>
        <el-button @click="setElsAlign('vertical')">居中</el-button>
        <el-button @click="setElsAlign('right')">右对齐</el-button>
        <el-button @click="setElsAlign('top')">顶部对齐</el-button>
        <el-button @click="setElsAlign('horizontal')">垂直居中</el-button>
        <el-button @click="setElsAlign('bottom')">底部对齐</el-button>
        <el-button @click="setElsAlign('distributeHor')">横向分散</el-button>
        <el-button @click="setElsAlign('distributeVer')">纵向分散</el-button>
        <el-button type="warning" @click="backTo">关闭此页面</el-button>
        <el-button type="primary" @click="preView">预览</el-button>
        <el-button type="success" @click="print">打印</el-button>
        <!-- <el-button type="success" @click="printV2">打印</el-button> -->

        <el-button type="info" @click="clearPaper">清空</el-button>
        <el-button type="warning" @click="exportJson">保存</el-button>
      </el-col>
    </el-row>

    <div
      v-if="toolList.length > 0"
      :class="
        templateConfig.type == 'B3' ||
        templateConfig.type == 'B4' ||
        templateConfig.type == 'B5'
          ? '233'
          : 'flex'
      "
    >
      <div class="item-left">
        <!-- 样式完全自定义 -->
        <el-card class="box-card element">
          <template #header>
            <div class="card-header">
              <div class="title">控件</div>
            </div>
          </template>
          <!-- 字段 -->
          <div>
            <h5>字段</h5>
            <div class="element-main">
              <div
                class="ep-draggable-item"
                :tid="item.tid"
                v-for="(item, index) in elementList"
                :key="index"
              >
                <i :class="`iconfont icon-${item.icon}`" />
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>

          <!-- 工具类 -->
          <div>
            <h5>工具类</h5>
            <div class="element-main">
              <div
                class="ep-draggable-item"
                :tid="item.tid"
                v-for="(item, index) in toolList"
                :key="index"
              >
                <i :class="`iconfont icon-${item.icon}`" />
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="item-right">
        <!-- 设计器的 容器 -->
        <el-card class="box-card main" v-loading="loading">
          <div class="flex">
            <div
              :style="`width:${templateConfig.width + 10}mm;height:${
                templateConfig.height + 30
              }mm;`"
            >
              <div class="title">标签设计({{ templateConfig.typeDict }})</div>
              <!-- 面板 -->
              <div id="hiprint-printTemplate"></div>
            </div>
            <!-- 属性 -->
            <div
              :class="
                templateConfig.type == 'B3' ||
                templateConfig.type == 'B4' ||
                templateConfig.type == 'B5'
                  ? ''
                  : 'elementTool'
              "
            >
              <div id="PrintElementOptionSetting"></div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 预览 -->
    <print-preview ref="preViewRef" />
  </div>
</template>
<style lang="scss" scoped>
.flex {
  width: 100%;
  display: flex;
}
// .item-left {
//   flex: 1;
// }
// .item-right {
//   flex: 1;
// }

.element-main {
  display: flex;
  flex-wrap: wrap;
  min-width: 280px;
  max-width: 350px;
  overflow: auto;
  flex: 1;

  & {
    overflow-y: scroll;
  }
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  &::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .ep-draggable-item {
    border: 1px solid #d7dae0;
    padding: 1px 5px;
    width: 4.3rem;
    height: 1.75rem;
    margin: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .iconfont {
      font-size: 40px;
    }
    font-size: 12px;
    .textClass {
      text-align: center;
      width: 4.3rem;
      height: 1.75rem;
      line-height: 1.75rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.element-main-233 {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}
.main {
  padding: 10px 0;
  padding-top: 0;
  display: flex;
  margin-right: 20px;

  .title {
    margin-bottom: 40px;
  }
}
.title {
  text-align: center;
}

.elementTool {
  flex: 1;
}
.flex-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.rk ::v-deep .el-form-item {
  width: 180px !important;
  height: 10px !important;
}

.box {
  width: 280px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

// .app-container ::v-deep  {
//   display: none !important;
// }
.flex-items-center {
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
}
.element-config {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: auto;
  max-width: 700px;
}
.width-config {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-between {
  width: 500px;
}

.app-container {
  div {
    transition: all 0.5s !important;
  }
}
</style>
